<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/device' }">设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>设备编辑</el-breadcrumb-item>
            </el-breadcrumb>

            <el-row>
                <el-col align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button type="primary" @click="submitForm('device')">保存</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="resetForm('device')">重置</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col align="left">
                    <h1>基本信息</h1>
                </el-col>
            </el-row>

            <el-row :gutter="30" class="mt20">

                <el-form label-position="left" :rules="rules" label-width="80px" :model="device"
                         ref="device">
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="设备编号" prop="no">
                                <el-input v-model.trim="device.no" placeholder="请输入设备编号" type="text" show-word-limit :maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item
                                    label="分组" prop="group">
                                <el-cascader
                                        v-model="device.group"
                                        :options="groups"
                                        :show-all-levels="false"
                                        :props="{value: 'id', label: 'name',  checkStrictly: true,expandTrigger: 'hover' }"
                                        style="width: 100%" clearable>
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="SIM卡号" prop="phone">
                                <el-input v-model.trim="device.phone" placeholder="请输入SIM卡号" type="text" show-word-limit :maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="已绑车辆" prop="vehicle">
                                <el-select v-model.trim="device.vehicle" filterable placeholder="请选择车牌号" class="size-full" clearable>
                                    <el-option
                                            v-for="item in options"
                                            :key="item.vehicle"
                                            :label="item.no"
                                            :value="item.vehicle"
                                             >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="设备类型" prop="type">
                                <el-select v-model="device.type" clearable class="size-full">
                                    <el-option label="未设置" :value="0"></el-option>
                                    <el-option label="调度设备" :value="1"></el-option>
                                    <el-option label="视频设备" :value="2"></el-option>
                                    <el-option label="客流设备" :value="3"></el-option>
                                    <el-option label="主动安全设备" :value="4"></el-option>
                                    <el-option label="危险品检测设备" :value="5"></el-option>
                                    <el-option label="公交卡刷卡机" :value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="定位装置">
                                <el-select v-model="device.locator" clearable class="size-full">
                                    <el-option label="无定位装置" :value="0"></el-option>
                                    <el-option label="GPS定位系统" :value="1"></el-option>
                                    <el-option label="北斗定位系统" :value="2"></el-option>
                                    <el-option label="GPS和北斗定位系统" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="入网类型">
                                <el-select v-model="device.network" clearable class="size-full">
                                    <el-option label="未设置" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="通信类型">
                                <el-select v-model="device.commun" clearable class="size-full">
                                    <el-option label="未设置" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="通信协议">
                                <el-select v-model="device.protocol" clearable class="size-full">
                                    <el-option label="未设置" :value="0"></el-option>
                                    <el-option label="JT808协议" :value="1"></el-option>
                                    <el-option label="Lanz私有协议" :value="2"></el-option>
                                    <el-option label="Lanz定制协议" :value="3"></el-option>
                                    <el-option label="海康扩展的JT808协议" :value="4"></el-option>
                                    <el-option label="青研扩展的JT808协议" :value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="差分定位">
                                <el-radio-group v-model="device.differential">
                                    <el-radio :label="2">支持差分定位</el-radio>
                                    <el-radio :label="1">不支持差分定位</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="默认限速" prop="speed">
                                <el-input v-model.trim="device.speed" placeholder="单位km/h" type="text" show-word-limit :maxlength="10"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="品牌">
                                <el-input v-model.trim="device.brand" placeholder="请输入品牌" type="text" show-word-limit :maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="制造商">
                                <el-input v-model.trim="device.manufacturer" placeholder="请输入制造商" type="text" show-word-limit :maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="安装日期" prop="buyDate">
                                <el-date-picker
                                        v-model="device.installationDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="停用日期" prop="buyDate">
                                <el-date-picker
                                        v-model="device.stopDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="注册日期" prop="buyDate">
                                <el-date-picker
                                        v-model="device.registrationDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-left: 20px">
                        <el-form-item label="视频设备">
                            <el-checkbox v-model="videoAll" @change="handleCheckAllChange($event, 'videoAllCheck', 'videoAllList')">全选</el-checkbox>
                            <el-checkbox-group v-model="videoAllCheck" @change="handleCheckedCitiesChange($event, 'videoAll', 'videoAllList')" style="width: 1000px">
                                <el-checkbox v-for="(item, index) in videoAllList" :label="item.exdeviceCode" :key="index">
                                    <el-input style="width: 100px;" v-model="item.exdeviceName" clearable></el-input>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-row>
                    <el-row style="margin-left: 20px">
                        <el-form-item label="音频设备">
                            <el-checkbox v-model="audioAll" @change="handleCheckAllChange($event, 'audioAllCheck', 'audioAllList')">全选</el-checkbox>
                            <el-checkbox-group v-model="audioAllCheck" @change="handleCheckedCitiesChange($event, 'audioAll', 'audioAllList')">
                                <el-checkbox v-for="(item, index) in audioAllList" :label="item.exdeviceCode" :key="index">{{ item.exdeviceName }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-row>
                    <el-row style="margin-left: 20px">
                        <el-form-item label="存储介质">
                            <el-checkbox v-model="storageAll" @change="handleCheckAllChange($event, 'storageAllCheck', 'storageAllList')">全选</el-checkbox>
                            <el-checkbox-group v-model="storageAllCheck" @change="handleCheckedCitiesChange($event, 'storageAll', 'storageAllList')">
                                <el-checkbox v-for="(item, index) in storageAllList" :label="item.exdeviceCode" :key="index">{{ item.exdeviceName }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-row>
                    <el-row style="margin-left: 20px">
                        <el-form-item label="客流设备">
                            <el-checkbox v-model="flowAll" @change="handleCheckAllChange($event, 'flowAllCheck', 'flowAllList')">全选</el-checkbox>
                            <el-checkbox-group v-model="flowAllCheck" @change="handleCheckedCitiesChange($event, 'flowAll', 'flowAllList')">
                                <el-checkbox v-for="(item, index) in flowAllList" :label="item.exdeviceCode" :key="index">
                                    <span class="pr15">{{ item.exdeviceName }}</span>
                                    <el-select v-model="flowSelectCheck[index].exdeviceName" style="width: 100px;">
                                        <el-option
                                                v-for="(item2, index2) in flowSelectList"
                                                :value="item2.id"
                                                :label="item2.name"
                                                :key="item.exdeviceCode + index2"
                                        ></el-option>
                                    </el-select>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>

    import {savaDevice, getGroupTree,getCarInfo} from '@/api';
    // 默认的视屏设备
    const defaultVideoAllList = [
        { exdeviceCode: '1', exdeviceName: '通道1', exdeviceType: '1' },
        { exdeviceCode: '2', exdeviceName: '通道2', exdeviceType: '1' },
        { exdeviceCode: '3', exdeviceName: '通道3', exdeviceType: '1' },
        { exdeviceCode: '4', exdeviceName: '通道4', exdeviceType: '1' },
        { exdeviceCode: '5', exdeviceName: '通道5', exdeviceType: '1' },
        { exdeviceCode: '6', exdeviceName: '通道6', exdeviceType: '1' },
        { exdeviceCode: '7', exdeviceName: '通道7', exdeviceType: '1' },
        { exdeviceCode: '8', exdeviceName: '通道8', exdeviceType: '1' },
        { exdeviceCode: '9', exdeviceName: '通道9', exdeviceType: '1' },
        { exdeviceCode: '10', exdeviceName: '通道10', exdeviceType: '1' },
        { exdeviceCode: '11', exdeviceName: '通道11', exdeviceType: '1' },
        { exdeviceCode: '12', exdeviceName: '通道12', exdeviceType: '1' },
        { exdeviceCode: '13', exdeviceName: '通道13', exdeviceType: '1' },
        { exdeviceCode: '14', exdeviceName: '通道14', exdeviceType: '1' },
        { exdeviceCode: '15', exdeviceName: '通道15', exdeviceType: '1' },
        { exdeviceCode: '16', exdeviceName: '通道16', exdeviceType: '1' },
        { exdeviceCode: '17', exdeviceName: '通道17', exdeviceType: '1' },
        { exdeviceCode: '18', exdeviceName: '通道18', exdeviceType: '1' }
    ];
    // 默认音频设备
    const defaultAudioAllList = [
        { exdeviceCode: '1', exdeviceName: '通道1', exdeviceType: '2' },
        { exdeviceCode: '2', exdeviceName: '通道2', exdeviceType: '2' },
        { exdeviceCode: '3', exdeviceName: '通道3', exdeviceType: '2' },
        { exdeviceCode: '4', exdeviceName: '通道4', exdeviceType: '2' },
        { exdeviceCode: '5', exdeviceName: '通道5', exdeviceType: '2' },
        { exdeviceCode: '6', exdeviceName: '通道6', exdeviceType: '2' },
        { exdeviceCode: '7', exdeviceName: '通道7', exdeviceType: '2' },
        { exdeviceCode: '8', exdeviceName: '通道8', exdeviceType: '2' }
    ];

    // 默认储存设备
    const defaultStorageAllList = [
        { exdeviceCode: '1', exdeviceName: '硬盘1', exdeviceType: '3' },
        { exdeviceCode: '2', exdeviceName: '硬盘2', exdeviceType: '3' },
        { exdeviceCode: '3', exdeviceName: 'SD1', exdeviceType: '3' },
        { exdeviceCode: '4', exdeviceName: 'SD2', exdeviceType: '3' },
        { exdeviceCode: '5', exdeviceName: '灾备存储', exdeviceType: '3' }
    ];
    export default {
        name: 'index1',
        data() {
            //正整数校验
            var valiNumberPass2 = (rule, value, callback) => {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {
                    callback();
                } else if (!reg.test(value)) {
                    callback(new Error('请输入正整数'));
                } else {
                    callback();
                }
            };
            return {


                //设备信息
                device: {
                    no: '',
                    group: '',
                    phone: '',
                    type: '',
                    state: '',
                },
                // 视频设备
                videoAll: false,
                videoAllCheck: [],
                videoAllList: [],
                // 音频设备
                audioAll: false,
                audioAllCheck: [],
                audioAllList: [],
                // 存储设备
                storageAll: false,
                storageAllCheck: [],
                storageAllList: [],
                // 客流设备
                flowAll: false,
                flowAllCheck: [],
                flowAllList: [
                    { exdeviceCode: '1', exdeviceName: '车门1', exdeviceType: '4' },
                    { exdeviceCode: '3', exdeviceName: '车门2', exdeviceType: '4' },
                    { exdeviceCode: '5', exdeviceName: '车门3', exdeviceType: '4' },
                    { exdeviceCode: '7', exdeviceName: '车门4', exdeviceType: '4' }
                ],
                flowSelectCheck: [
                    { exdeviceCode: '2', exdeviceName: '视频1', exdeviceType: '4' },
                    { exdeviceCode: '4', exdeviceName: '视频2', exdeviceType: '4' },
                    { exdeviceCode: '6', exdeviceName: '视频3', exdeviceType: '4' },
                    { exdeviceCode: '8', exdeviceName: '视频4', exdeviceType: '4' }
                ],
                flowSelectList: [
                    { id: '视频1', name: '视频1' },
                    { id: '视频2', name: '视频2' },
                    { id: '视频3', name: '视频3' },
                    { id: '视频4', name: '视频4' },
                    { id: '视频5', name: '视频5' },
                    { id: '视频6', name: '视频6' },
                    { id: '视频7', name: '视频7' },
                    { id: '视频8', name: '视频8' }
                ],
                groups: [],
                options: [],

                //验证规则
                rules: {
                    no: [
                        {required: true, message: '设备自编号不能为空', trigger: 'blur'},
                    ],
                    group: [
                        {required: true, message: '分组不能为空', trigger: 'blur'},
                    ],
                    type: [
                        {required: true, message: '类型不能为空', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: 'SIM卡不可为空', trigger: 'blur'},
                    ],
                    state: [
                        {required: true, message: '设备状态不能为空', trigger: 'blur'},
                    ],
                    speed: [
                        {validator: valiNumberPass2, trigger: 'blur'},
                    ],
                },

            }
        },
        methods: {

            handleCheckAllChange(val, allName, allList) {
                this[allName] = val ? this[allList].map(item => item.exdeviceCode) : [];
            },
            handleCheckedCitiesChange(val, all, allList) {
                this[all] = val.length === this[allList].length;
            },

            // 获取当前权限下所有分组
            getGroupTreeFn() {
                getGroupTree({}).then(res => {
                    this.groups = res.data.children
                })
            },
            //获取车辆信息
            getCarInfoFn() {
                getCarInfo({}).then(res => {
                    this.options = res.data
                    console.log(res)
                })
            },

            //提交表单
            submitForm(formName) {
                if (this.device.group.hasOwnProperty('length')) {
                    if (this.device.group.length != 0) {
                        this.device.group = this.device.group[this.device.group.length - 1]
                    }
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let videoDev = [];
                        let audioDev = [];
                        let storageDev = [];
                        let passengerDev = [];
                        this.videoAllList.forEach(item => {
                            this.videoAllCheck.forEach(item2 => {
                                if (item.exdeviceCode == item2) {
                                    videoDev.push(item);
                                }
                            });
                        });
                        let res = JSON.parse(JSON.stringify(videoDev))
                        this.device.videoDev=res

                        //音频设备
                        this.audioAllList.forEach(item => {
                            this.audioAllCheck.forEach(item2 => {
                                if (item.exdeviceCode == item2) {
                                    audioDev.push(item);
                                }
                            });
                        });
                        this.device.audioDev=JSON.parse(JSON.stringify(audioDev))
                        this.storageAllList.forEach(item => {
                            this.storageAllCheck.forEach(item2 => {
                                if (item.exdeviceCode == item2) {
                                    storageDev.push(item);
                                }
                            });
                        });
                        this.device.storageDev=JSON.parse(JSON.stringify(storageDev))
                        this.flowAllList.forEach(item => {
                            this.flowAllCheck.forEach(item2 => {
                                if (item.exdeviceCode == item2) {
                                    passengerDev.push(item);
                                }
                            });
                        });
                        this.device.passengerDev=JSON.parse(JSON.stringify(passengerDev))
                        savaDevice(this.device).then(res => {
                            if (res.code == 200) {
                                this.$message.success("保存成功");
                                this.$router.push('/device')
                                this.$store.dispatch('tagsView/delView', {path: '/device/edit'})
                            }
                        })
                    } else {
                        this.$message.error("信息填写有误")
                        return false;
                    }
                });
            },

            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        mounted() {
            if (this.$route.query.device != null) {
                this.device = this.$route.query.device
                let tempVideoCheck = [];
                let tempAudioCheck = [];
                let tempStorageCheck = [];
                this.flowAllCheck = [];
                this.flowSelectCheck = [];
                this.flowSelectCheck = [
                    { exdeviceCode: '2', exdeviceName: '视频1', exdeviceType: '4' },
                    { exdeviceCode: '4', exdeviceName: '视频2', exdeviceType: '4' },
                    { exdeviceCode: '6', exdeviceName: '视频3', exdeviceType: '4' },
                    { exdeviceCode: '8', exdeviceName: '视频4', exdeviceType: '4' }
                ];

                this.videoAllList = defaultVideoAllList.map(item => {
                    this.device.videoDev.forEach(item2 => {
                        if (item.exdeviceCode == item2.exdeviceCode) {
                            item.exdeviceId = item2.exdeviceId;
                            tempVideoCheck.push(item2.exdeviceCode);
                        }
                    });
                    return item;
                });

                this.audioAllList = defaultAudioAllList.map(item => {
                    this.device.audioDev.forEach(item2 => {
                        if (item.exdeviceCode == item2.exdeviceCode) {
                            item.exdeviceId = item2.exdeviceId;
                            tempAudioCheck.push(item2.exdeviceCode);
                        }
                    });
                    return item;
                });

                this.storageAllList = defaultStorageAllList.map(item => {
                    this.device.storageDev.forEach(item2 => {
                        if (item.exdeviceCode == item2.exdeviceCode) {
                            item.exdeviceId = item2.exdeviceId;
                            tempStorageCheck.push(item2.exdeviceCode);
                        }
                    });
                    return item;
                });

                this.videoAllCheck = tempVideoCheck;
                this.audioAllCheck = tempAudioCheck;
                this.storageAllCheck = tempStorageCheck;

                this.device.passengerDev.forEach(item => {
                    if (Number(item.exdeviceCode) % 2 === 0) {
                        this.flowSelectCheck.push(item);
                    } else {
                        this.flowAllCheck.push(item.exdeviceCode);
                    }
                });
                console.log(tempVideoCheck)

            }else {
                this.videoAllList = defaultVideoAllList;
                this.audioAllList = defaultAudioAllList;
                this.storageAllList = defaultStorageAllList;

                this.videoAllCheck = [];
                this.audioAllCheck = [];
                this.storageAllCheck = [];
                this.flowAllCheck = [];
                this.flowSelectCheck = [
                    { exdeviceCode: '2', exdeviceName: '视频1', exdeviceType: '4' },
                    { exdeviceCode: '4', exdeviceName: '视频2', exdeviceType: '4' },
                    { exdeviceCode: '6', exdeviceName: '视频3', exdeviceType: '4' },
                    { exdeviceCode: '8', exdeviceName: '视频4', exdeviceType: '4' }
                ];
                console.log(111111111)
            }
            console.log(this.device)
            this.getGroupTreeFn()
            this.getCarInfoFn()

        }
    }
</script>

<style scoped>

    .size-full {
        width: 100%;
    }

</style>
